import React from 'react';
import { Form, Input, Button, Checkbox, message, Card } from 'antd';
import { useNavigate } from 'react-router-dom';
import { loginApi } from '../services/auth';
import { setToken } from '../utils/auth';

function Login() {
    const navigate = useNavigate();
    const [form] = Form.useForm();

    // 处理登录表单提交
    const onFinish = async (values) => {
        try {
            // 准备登录数据
            const loginData = {
                userName: values.username,
                password: values.password
            };

            // 调用登录接口
            const response = await loginApi(loginData);

            // 检查登录结果
            if (response.code === 'success' || response.code === 200) {
                // 登录成功
                message.success('登录成功');

                // 保存 token
                setToken(response.token);

                // 跳转到后台首页
                navigate('/admin/dashboard');
            } else {
                // 登录失败
                message.error(response.message || '登录失败');
            }
        } catch (error) {
            // 网络或其他错误
            message.error('登录失败，请检查用户名和密码');
        }
    };

    // 处理登录失败
    const onFinishFailed = (errorInfo) => {
        console.log('登录表单验证失败:', errorInfo);
        message.error('请检查输入内容是否正确');
    };

    return (
        <div style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100vh',
            backgroundColor: '#f0f2f5'
        }}>
            <Card style={{
                width: 400,
                padding: 20
            }}>
                <h2 style={{ textAlign: 'center', marginBottom: 30 }}>管理系统登录</h2>
                <Form
                    form={form}
                    name="login"
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[{ required: true, message: '请输入用户名!' }]}
                    >
                        <Input placeholder="请输入用户名" />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: '请输入密码!' }]}
                    >
                        <Input.Password placeholder="请输入密码" />
                    </Form.Item>

                    <Form.Item
                        name="remember"
                        valuePropName="checked"
                        wrapperCol={{ offset: 8, span: 16 }}
                    >
                        <Checkbox>记住密码</Checkbox>
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>

            </Card>
        </div>
    );
}

export default Login;
